<template>
  <div>
    <van-nav-bar
      title="龙猫收银台"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="pay">
      <div class="sumPrice">￥<span :style="{ fontSize: '30px' }">{{ totalPrice }}</span></div>
      <div class="time">请在 <span :style="{ fontSize: '15px',color:'red',background:'#dcdcdc'}">{{ formattedTime }}</span> 内付款</div>
    </div>
    <div class="payBtn" @click="pay()" >确认付款</div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Dialog } from 'vant'

export default {
  name: 'myOrderIndex',
  computed: {
    ...mapGetters('cart', ['selPrice', 'selCartListsNoChecked']),
    formattedTime () {
      return `${this.formatTime(this.minutes)}:${this.formatTime(this.seconds)}`
    }

  },
  data () {
    return {
      minutes: 10, // 设置初始分钟数为10
      seconds: 0, // 初始秒数为0
      timer: null,
      transportPrice: 0,
      totalPrice: 0
    }
  },
  methods: {
    formatTime (time) {
      return time < 10 ? '0' + time : time
    },
    countDown () {
      // 确保在每次启动新的倒计时之前清除上一个定时器
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.minutes = 10 // 重置分钟数为10
      this.seconds = 0 // 重置秒数为0
      this.timer = setInterval(() => {
        if (this.minutes === 0 && this.seconds === 0) {
          clearInterval(this.timer) // 倒计时结束时清除定时器
          // 1.5秒后自动跳转
          setTimeout(() => {
            this.$router.push('/pay')
          }, 1500)
          // 直接返回，不再执行后续代码
        } else {
          if (this.seconds === 0) {
            // 当秒数减到0时，分钟数减1，并重置秒数为59
            this.minutes--
            this.seconds = 59
          } else {
            // 其他情况下，仅将秒数减1
            this.seconds--
          }
        }
      }, 1000) // 每1秒执行一次
      // 清除定时器，当组件销毁时
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.timer)
      })
    },
    pay () {
      Dialog.confirm({
        title: '提示',
        message: '确认支付？'
      }).then(async () => {
        try {
          // 等待支付成功后的操作
          await this.$store.dispatch('pay/payPriceAction', this.totalPrice)
          // 等待购物车更新
          await this.$store.dispatch('cart/changeCartListsAction', this.selCartListsNoChecked)
          // 支付成功后跳转到购物车页面
          this.$router.push('/cart')
        } catch (error) {
          // 捕获支付或购物车更新的错误
          console.error('支付失败或更新购物车失败', error)
        }
      }).catch(() => {
        // 用户取消支付的回调处理
        console.log('用户取消支付')
        // 可选：向用户显示取消支付的提示
        this.$toast('支付已取消')
      })
    },
    getTransportPrice () {
      this.transportPrice = (this.selPrice * 0.003).toFixed(2)
    },
    getTotalPrice () {
      this.totalPrice = Number(this.selPrice) + Number(this.transportPrice)
    }
  },
  created () {
    this.countDown()
    this.getTransportPrice()
    this.getTotalPrice()
    // this.$store.dispatch('cart/setSelPrice', 200)
  },
  mounted () {
    this.countDown()
  }
}
</script>
<style>
.pay{
  height: 130px;
  width: 100%;
}
.sumPrice{
  height: 50px;
  width: 100%;
  background-color: #fff;
  font-size: 20px;
  color: red;
  line-height: 50px;
  text-align: center;
}
.time{
  height: 50px;
  width: 100%;
  background-color: #fff;
  line-height: 50px;
  text-align: center;
}
.payBtn{
  height: 50px;
  width: 100%;
  background-color: red;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  position:fixed;
  bottom: 0;
}
</style>
